// 实现这个项目的构建任务
// gulp.src 获取流，读取文件
// gulp.dest : 写入流，写文件
// gulp.series 用于串行（顺序）执行
// gulp.parallel 用于并行执行
// gulp 的入口文件
// watch : 监视文件变化
const { src, dest, parallel, series, watch } = require("gulp");
const del = require("del");
const browserSync = require("browser-sync");
//导出方法
const loadPlugins = require("gulp-load-plugins");

const plugins = loadPlugins();

const bs = browserSync.create();
//const  sass = require('gulp-sass')
// const plugins.babel = require('gulp-babel')
// const plugins.swig = require('gulp-swig')
// const plugins.imagemin = require('gulp-imagemin')

const data = {
    menus: [{
            name: "Home",
            icon: "aperture",
            link: "index.html",
        },
        {
            name: "Features",
            link: "features.html",
        },
        {
            name: "About",
            link: "about.html",
        },
        {
            name: "Contact",
            link: "#",
            children: [{
                    name: "Twitter",
                    link: "https://twitter.com/w_zce",
                },
                {
                    name: "About",
                    link: "https://weibo.com/zceme",
                },
                {
                    name: "divider",
                },
                {
                    name: "About",
                    link: "https://github.com/zce",
                },
            ],
        },
    ],
    pkg: require("./package.json"),
    date: new Date(),
};

const clean = () => {
    return del(["dist", 'temp']);
};

const style = () => {
    return src("src/assets/styles/*.scss", { base: "src" })
        .pipe(plugins.sass({ outputStyle: "expanded" }))
        .pipe(dest("temp"))
        //.pipe(bs.reload({ stream: true })) //可代替114行的代码，流的形式推给浏览器
};

const script = () => {
    return src("src/assets/scripts/*.js", { base: "src" })
        .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
        .pipe(dest("temp"));
};

const page = () => {
    return src("src/**/*.html", { base: "src" })
        .pipe(plugins.swig({ data }))
        .pipe(dest("temp"));
};

const image = () => {
    return src("src/assets/images/**", { base: "src" })
        .pipe(plugins.imagemin())
        .pipe(dest("dist"));
};

const font = () => {
    return src("src/assets/fonts/**", { base: "src" })
        .pipe(plugins.imagemin())
        .pipe(dest("dist"));
};

//额外的目录
const extra = () => {
    return src("public/**", { base: "public" })
        .pipe(dest("dist"));
};

const serve = () => {
    watch('src/assets/styles/*.scss', style)
    watch('src/assets/scripts/*.js', script)
    watch('src/**/*.html', page)
        // watch('src/assets/images/**', image)
        // watch('src/assets/fonts/**', font)
        // watch('public/**', extra)
    watch([
        'src/assets/images/**',
        'src/assets/fonts/**',
        'public/**'
    ], bs.reload)

    bs.init({
        notify: false,
        port: 2000,
        //open: false,
        files: "dist/**", //监听文件变化
        server: {
            baseDir: ['temp', 'src', 'public'],
            routes: {
                "/node_modules": "node_modules",
            },
        },
    });
};

//处理html中文件的引入问题,可合并到一个文件 
const useref = () => {
    return src('temp/*html', { base: 'dist' })
        .pipe(plugins.useref({ searchPath: ['temp', '.'] }))
        //html 、js、css
        .pipe(plugins.if(/\.js$/, plugins.uglify())) //文件压缩
        .pipe(plugins.if(/\.css$/, plugins.cleanCss())) //文件压缩
        .pipe(plugins.if(/\.html$/, plugins.htmlmin({
            collapseWhitespace: true,
            minifyCSS: true,
            minifyJS: true
        }))) //文件压缩
        .pipe(dest('dist'))
}

//组合任务
const compile = parallel(style, script, page);

//上线之前执行的任务
const build = series(clean, parallel(series(compile, useref), image, font, extra));

const develop = series(compile, serve)

module.exports = {
    build,
    compile,
    serve,
    develop,
    useref
};